<template>
  <div class="question-editor">
    <!-- 添加或修改考试题库对话框 -->
    <el-dialog
      :title="title"
      width="1000px"
      append-to-body
      :show-close="false"
      :visible="true"
    >
      <el-form
        ref="form"
        :loading="loading"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="编程语言" prop="lang">
              <el-select
                :disabled="lang && lang.length > 0"
                v-model="form.lang"
                placeholder="请选择编程语言"
              >
                <el-option
                  v-for="dict in dict.type.QuestionLang"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="难度等级" prop="level">
              <el-select v-model="form.level" placeholder="请选择难度等级">
                <el-option
                  v-for="dict in dict.type.QuestionLevel"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="题目类型" prop="qtype">
              <el-select
                :disabled="qtype && qtype.length > 0"
                v-model="form.qtype"
                placeholder="请选择题目类型"
              >
                <el-option
                  v-for="dict in dict.type.QuestionType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="题目标题" prop="questionTitle">
              <tinymce-editor
                v-model="form.questionTitle"
                :height="150"
                :toolbar="'undo redo| outdent indent | image table | paste'"
              >
              </tinymce-editor>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-show="form.qtype == 1">
            <!-- 单选题展示 -->
            <el-form-item label="选择项">
              <el-card>
                <el-row
                  v-for="(option, index) in selectOptions"
                  :key="option.label"
                  :gutter="20"
                >
                  <el-col :span="1">
                    {{ option.label }}
                  </el-col>
                  <el-col :span="20">
                    <tinymce-editor
                      v-model="option.content"
                      :height="120"
                      :toolbar="'undo redo| image paste'"
                    >
                    </tinymce-editor>
                  </el-col>
                  <el-col :span="24" v-if="index < 3">
                    <el-divider />
                  </el-col>
                </el-row>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="form.qtype == 1 || form.qtype == 2">
            <el-form-item label="正确答案" :required="true">
              <template v-if="form.qtype == 1">
                <el-radio v-model="form.correct" label="A">A</el-radio>
                <el-radio v-model="form.correct" label="B">B</el-radio>
                <el-radio v-model="form.correct" label="C">C</el-radio>
                <el-radio v-model="form.correct" label="D">D</el-radio>
              </template>
              <template v-else-if="form.qtype == 2">
                <el-radio v-model="form.correct" label="T">正确</el-radio>
                <el-radio v-model="form.correct" label="F">错误</el-radio>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addQuestion, updateQuestion, getQuestion } from '@/api/exam/question';

import TinymceEditor from '@/components/TinymceEditor';

export default {
  dicts: ['QuestionType', 'QuestionLevel', 'QuestionLang'],
  components: {
    TinymceEditor,
  },
  props: {
    type: {
      type: 'edit' | 'add',
      default: 'add',
    },
    questionId: {
      type: Number,
      default: null,
    },
    qtype: {
      type: String,
      default: null,
    },
    lang: {
      type: String,
      default: null,
    },
  },
  created() {
    if (this.type == 'edit' && this.questionId) {
      this.getQuestionInfo(this.questionId);
    }
  },
  data() {
    const initSelectOptions = [
      {
        label: 'A',
        content: '',
      },
      {
        label: 'B',
        content: '',
      },
      {
        label: 'C',
        content: '',
      },
      {
        label: 'D',
        content: '',
      },
    ];
    return {
      loading: false,
      title: this.type == 'add' ? '新增题目' : '编辑题目',
      // 选择项
      selectOptions: initSelectOptions,
      // 表单参数
      form: {
        qtype: this.qtype,
        lang: this.lang,
      },
      // 表单校验
      rules: {
        lang: [
          { required: true, message: '编程语言不能为空', trigger: 'change' },
        ],
        level: [
          { required: true, message: '难度等级不能为空', trigger: 'change' },
        ],
        qtype: [
          { required: true, message: '题目类型不能为空', trigger: 'change' },
        ],
        questionTitle: [
          { required: true, message: '题目标题不能为空', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        questionId: null,
        lang: null,
        level: null,
        qtype: null,
        content: null,
        correct: null,
        deleted: null,
      };
      this.resetForm('form');
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$parent.closeEditQuestionModal();
    },
    /** 提交按钮 */
    submitForm() {
      this.loading = true;
      let content = {
        title: this.form.questionTitle,
        options: undefined,
      };
      // 单选题
      if (this.form.qtype == 1) {
        content.options = this.selectOptions;
        if (
          !this.form.correct ||
          !['A', 'B', 'C', 'D'].includes(this.form.correct)
        ) {
          this.loading = false;
          return this.$message.error('请选择正确答案');
        }
      }
      // 判断题
      if (
        this.form.qtype == 2 &&
        (!this.form.correct || !['T', 'F'].includes(this.form.correct))
      ) {
        this.loading = false;
        return this.$message.error('请选择正确答案');
      }
      this.form.content = JSON.stringify(content);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.questionId != null) {
            updateQuestion(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.reset();
              this.loading = false;
              // 将结果返回父组件
              this.$parent.finishEditQuestion(response.data);
            });
          } else {
            addQuestion(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功');
              this.reset();
              this.loading = false;
              // 将结果返回父组件
              this.$parent.finishEditQuestion(response.data);
            });
          }
        }
      });
    },
    /** 获取题目 */
    getQuestionInfo(questionId) {
      this.loading = true;
      getQuestion(questionId).then((response) => {
        const data = response.data;
        this.form = data;
        const contentObj = JSON.parse(data.content);
        this.form.questionTitle = contentObj.title;
        this.selectOptions = contentObj.options;
        this.loading = false;
      });
    },
  },
};
</script>

<style></style>
